aristath /
kirki
| Conditions | 19 |
| Paths | 32 |
| Total Lines | 128 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like wp.customize.Control.extend.initKirkiControl often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /* global kirkiControlLoader */ |
||
| 19 | initKirkiControl: function() { |
||
| 20 | |||
| 21 | var control = this, |
||
| 22 | value = control.getValue(), |
||
| 23 | saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url', |
||
| 24 | preview = control.container.find( '.placeholder, .thumbnail' ), |
||
| 25 | previewImage = ( 'array' === saveAs ) ? value.url : value, |
||
| 26 | removeButton = control.container.find( '.image-upload-remove-button' ), |
||
| 27 | defaultButton = control.container.find( '.image-default-button' ); |
||
| 28 | |||
| 29 | control.container.find( '.kirki-controls-loading-spinner' ).hide(); |
||
| 30 | |||
| 31 | // Tweaks for save_as = id. |
||
| 32 | if ( ( 'id' === saveAs || 'ID' === saveAs ) && '' !== value ) { |
||
| 33 | wp.media.attachment( value ).fetch().then( function() { |
||
| 34 | setTimeout( function() { |
||
| 35 | var url = wp.media.attachment( value ).get( 'url' ); |
||
| 36 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + url + '" alt="" />' ); |
||
| 37 | }, 700 ); |
||
| 38 | } ); |
||
| 39 | } |
||
| 40 | |||
| 41 | // If value is not empty, hide the "default" button. |
||
| 42 | if ( ( 'url' === saveAs && '' !== value ) || ( 'array' === saveAs && ! _.isUndefined( value.url ) && '' !== value.url ) ) { |
||
| 43 | control.container.find( 'image-default-button' ).hide(); |
||
| 44 | } |
||
| 45 | |||
| 46 | // If value is empty, hide the "remove" button. |
||
| 47 | if ( ( 'url' === saveAs && '' === value ) || ( 'array' === saveAs && ( _.isUndefined( value.url ) || '' === value.url ) ) ) { |
||
| 48 | removeButton.hide(); |
||
| 49 | } |
||
| 50 | |||
| 51 | // If value is default, hide the default button. |
||
| 52 | if ( value === control.params['default'] ) { |
||
| 53 | control.container.find( 'image-default-button' ).hide(); |
||
| 54 | } |
||
| 55 | |||
| 56 | if ( '' !== previewImage ) { |
||
| 57 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' ); |
||
| 58 | } |
||
| 59 | |||
| 60 | control.container.on( 'click', '.image-upload-button', function( e ) { |
||
| 61 | var image = wp.media({ multiple: false }).open().on( 'select', function() { |
||
| 62 | |||
| 63 | // This will return the selected image from the Media Uploader, the result is an object. |
||
| 64 | var uploadedImage = image.state().get( 'selection' ).first(), |
||
| 65 | previewImage = uploadedImage.toJSON().sizes.full.url; |
||
| 66 | |||
| 67 | if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) { |
||
| 68 | previewImage = uploadedImage.toJSON().sizes.medium.url; |
||
| 69 | } else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) { |
||
| 70 | previewImage = uploadedImage.toJSON().sizes.thumbnail.url; |
||
| 71 | } |
||
| 72 | |||
| 73 | if ( 'array' === saveAs ) { |
||
| 74 | control.saveValue( 'id', uploadedImage.toJSON().id ); |
||
| 75 | control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url ); |
||
| 76 | control.saveValue( 'width', uploadedImage.toJSON().width ); |
||
| 77 | control.saveValue( 'height', uploadedImage.toJSON().height ); |
||
| 78 | } else if ( 'id' === saveAs ) { |
||
| 79 | control.saveValue( 'id', uploadedImage.toJSON().id ); |
||
| 80 | } else { |
||
| 81 | control.saveValue( 'url', uploadedImage.toJSON().sizes.full.url ); |
||
| 82 | } |
||
| 83 | |||
| 84 | if ( preview.length ) { |
||
| 85 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' ); |
||
| 86 | } |
||
| 87 | if ( removeButton.length ) { |
||
| 88 | removeButton.show(); |
||
| 89 | defaultButton.hide(); |
||
| 90 | } |
||
| 91 | }); |
||
| 92 | |||
| 93 | e.preventDefault(); |
||
| 94 | }); |
||
| 95 | |||
| 96 | control.container.on( 'click', '.image-upload-remove-button', function( e ) { |
||
| 97 | |||
| 98 | var preview, |
||
| 99 | removeButton, |
||
| 100 | defaultButton; |
||
| 101 | |||
| 102 | e.preventDefault(); |
||
| 103 | |||
| 104 | control.saveValue( 'id', '' ); |
||
| 105 | control.saveValue( 'url', '' ); |
||
| 106 | control.saveValue( 'width', '' ); |
||
| 107 | control.saveValue( 'height', '' ); |
||
| 108 | |||
| 109 | preview = control.container.find( '.placeholder, .thumbnail' ); |
||
| 110 | removeButton = control.container.find( '.image-upload-remove-button' ); |
||
| 111 | defaultButton = control.container.find( '.image-default-button' ); |
||
| 112 | |||
| 113 | if ( preview.length ) { |
||
| 114 | preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' ); |
||
| 115 | } |
||
| 116 | if ( removeButton.length ) { |
||
| 117 | removeButton.hide(); |
||
| 118 | if ( jQuery( defaultButton ).hasClass( 'button' ) ) { |
||
| 119 | defaultButton.show(); |
||
| 120 | } |
||
| 121 | } |
||
| 122 | }); |
||
| 123 | |||
| 124 | control.container.on( 'click', '.image-default-button', function( e ) { |
||
| 125 | |||
| 126 | var preview, |
||
| 127 | removeButton, |
||
| 128 | defaultButton; |
||
| 129 | |||
| 130 | e.preventDefault(); |
||
| 131 | |||
| 132 | control.saveValue( 'url', control.params['default'] ); |
||
| 133 | |||
| 134 | preview = control.container.find( '.placeholder, .thumbnail' ); |
||
| 135 | removeButton = control.container.find( '.image-upload-remove-button' ); |
||
| 136 | defaultButton = control.container.find( '.image-default-button' ); |
||
| 137 | |||
| 138 | if ( preview.length ) { |
||
| 139 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params['default'] + '" alt="" />' ); |
||
| 140 | } |
||
| 141 | if ( removeButton.length ) { |
||
| 142 | removeButton.show(); |
||
| 143 | defaultButton.hide(); |
||
| 144 | } |
||
| 145 | }); |
||
| 146 | }, |
||
| 147 | |||
| 185 |
